<template>
  <div>
    <div id="enrollment-detail">
      <img :src="enrollmentDetailInfo.contentPic" alt="活动图片">
      <div class="enroll-content enroll-info">
        <h3>{{enrollmentDetailInfo.title}}</h3>
        <div class="enroll-text">
          <p v-html="enrollmentDetailInfo.activityDate"></p>
          <p>{{enrollmentDetailInfo.alreadyRegistered}}人已报名</p>
          <p>可报名人数：{{enrollmentDetailInfo.enrolNumber}}</p>
        </div>
      </div>
      <div class="enroll-content">
        <h3>参加须知</h3>
        <div class="enroll-text">
          <p>报名开始时间: {{enrollmentDetailInfo.enrolStartDate}}</p>
          <p>报名截止时间: {{enrollmentDetailInfo.enrolEndDate}}</p>
        </div>
      </div>
      <div class="enroll-content">
        <h3>活动详情</h3>
        <div class="enroll-text" v-html="enrollmentDetailInfo.content" ref="articleCon"></div>
      </div>
    </div>
    <div class="enrollAtOnce">
      <div class="enrollNum"><strong>{{enrollmentDetailInfo.alreadyRegistered}}</strong>人已报名</div>
      <div class="enrollBtn"  @click = "enrollAtOnce">立即报名</div>
    </div>
    <!--正在加载提示框-->
    <loading v-if="loadShow"></loading>
    <!--加载失败弹框-->
    <dialog-box :message="dialogMessage" v-if="dialogShow" @close-dialog="closeDialog" @cancle-dialog="closeDialog"></dialog-box>
  </div>
</template>
<script>
  import '../../assets/css/enrollment_detail.scss';
  import interfaceAPI from '../../assets/js/insterface.js';
  import http from '../../assets/js/http_mixin'
  var enrollmentDetailUrl = interfaceAPI.entrollmentDetailUrl;
  var entrollmentUrl = interfaceAPI.entrollmentUrl;
  export default {
    data() {
      return {
        noData: '暂无数据',
        enrollmentPageId: '',           // 保存页面的ID
        enrollmentDetailInfo: {}        // 活动详情信息
      }
    },
    mixins: [http],
    mounted() {
      this.enrollmentPageId = this.$route.query.id;    // 页面的ID
      this.getInfo({
        url: enrollmentDetailUrl,
        param: {
          'id': this.enrollmentPageId
        },
        success: function (response) {
          if(response.body.resType === '00'){
            this.enrollmentDetailInfo = response.body.data;
            this.$nextTick(function(){
              this.setStyle();
            });
          }else{
              this.noData = response.body.msg;
          }
        },
        fail: function (response) {
          this.dialogMessage = '请求失败，请稍后再试';
          this.dialogShow = true;
        }
      })
    },
    methods: {
      setStyle(){
        var tds = this.$refs.articleCon.getElementsByTagName('td');
        for(let i =0 ; i< tds.length; i++ ){
          tds[i].style.borderWidth = '1px';
          tds[i].style.borderStyle = 'solid';
        }
        // console.log(typeof tds)
        // tds.map(function(){
        //  this.setAttribute('style','border:solid 1px #ddd');
        // })
      },
      enrollAtOnce(){
        this.getInfo({
          url: entrollmentUrl,
          param: {
            'id': this.enrollmentPageId,
            'empNo': this.$route.query.empNo
          },
          success: function (response) {
            var callDate = response.body;
            if (callDate.type === '1') {
              this.dialogMessage = '<h3 style="line-height: 1.8">报名失败</h3><p>' + callDate.msg + '</p>';
            } else {
              this.dialogMessage = '<h3 style="line-height: 1.8">报名成功</h3><p>' + callDate.msg + '</p>';
              this.enrollmentDetailInfo.alreadyRegistered += 1;
            }
            this.dialogShow = true;
          },
          fail: function (response) {
            this.dialogMessage = '请求失败，请稍后再试';
            this.dialogShow = true;
          }
        })
      }
    }
  }
</script>
